import {action, computed, observable} from 'mobx';
const map=observable.map({key:"value"});
map.set('key', 'new Values');
console.log(map);
/**
 * Observable state 可观察的状态
 * Mobx为现有的数据结构（如对象、数组和类实例）添加了可观察的功能，通过使用@observable装饰器来给你的类属性添加注解就可以简地完成这一切；
 * @observable 接受任何类型的 js 值（原始类型、引用、纯对象、类实例、数组和、maps），observable 的属性值在其变化的时候 mobx 会自动追踪并作出响应。
 * - 可以通过decorate工具在不支持装饰器语法的情况下使用，
 * @observable.deep （默认）对对象进行深拷贝；
 * @observable.shallow 它只对对象进行浅拷贝；
 * @observable.ref 禁用对象的自动转化，只转化其引用；
 * 当定义好其 observable 的对象值后，对象中后来添加的值是不会变为可观察的，这时需要使用 extendObservable 来扩展对象
 *  - extendObservable("name", {});
 *
 *
 * Compouted values 计算值
 * 通过@computed装饰器或者利用(extend)Observable时调用的getter/setter函数来进行使用；
 * - 也可以再次使用decorate来替代@语法
 * - @computed get computesValue [function];
 *
 * Action 动作
 * 对于 store 对象中可观察的属性值，在他们改变的时候则会触发观察监听的函数，这里注意两点：
 * - 该属性必须是定义的可观察属性（@observable）
 * - 它的值必须发生改变（和原值是不等的）：
 *
 * autorun 运行观察
 * 接收一个函数作为参数，在使用autorun的时候，该函数会被立即调用一次，之后当该函数中依赖的可观察状态属性发生变化的时候，该函数会被调用，
 * - 该函数的调用取决的函数中使用了哪些可观察状态属性；
 *
 * Reactions 反应
 * 和计算值很像，但它不是产生一个新的值，而是会产生一些副作用，比如打印到控制台，网络请求，递增地更新React组件树以修补DOM等等；
 * - Reactions在 响应式编程 和 命令式编程 之间建立沟通的桥梁；
 *
 * - 在React中，可以把无状态函数组件变成响应式组件，方法是在组件添加observer函数/装饰器，observer是有mobx-react提供；
 *
 *
 * Mobx的理念是通过观察模式对数据做出追踪处理，在对可观察属性的作出变更或者引用的时候，触发期依赖的监听函数，在React中既是在
 * @observer中对组件进行数据更新并渲染到视图层面，其核心和开发模式和VUE非常相似。
 *
 * 相比于Redux纯函数的形式，它在代码层面却是给开发者减少了不少工作量，但在多人维护的大项目中，个人认为还是Redux更加有利，
 * 一旦项目中的数据交互增多，其在Mobx中对于数据流的变化就变得难以理清，而只能依靠约定来限制触发场景。
 *
 *
 * **/
class IndexStore {
	@observable name='title';
	@observable age=13;
	@computed get ageSize(){
		if(this.name==="title"){
			return 222;
		}else{
			return 3333;
		}
	}
	@action
	setName=()=>{
		this.name=1212;
	}
	@action
	ageStore=()=>{
		this.age=313123;
	}
}
export default IndexStore;
